<template>
    <div class="home-product">
      <ul>
        <li v-for="item in brandList" :key="item.id">
          <div class="product-card" @mouseover="hoverIn(item.id)" @mouseleave="hoverOut(item.id)">
            <img :src="item.pic_url" alt="" class="product-image">
            <h4 class="product-title">{{ item.name }}</h4>
          </div>
        </li>
      </ul>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const brandList = [
    { id: 1, name: '甄选推荐', pic_url: 'src/assets/HomeProduct/11.webp' },
    { id: 2, name: '甄选推荐', pic_url: 'src/assets/HomeProduct/7.webp' },
    { id: 3, name: '甄选推荐', pic_url: 'src/assets/HomeProduct/8.webp' },
    { id: 4, name: '甄选推荐', pic_url: 'src/assets/HomeProduct/9.webp' }
  ]
  
  const hoveredId = ref(null);
  
  const hoverIn = (id) => {
    hoveredId.value = id;
  };
  
  const hoverOut = () => {
    hoveredId.value = null;
  };
  </script>
  
  <style lang="less" scoped>
  .home-product {
    ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      list-style: none;
      padding: 0;
      margin: 0;
    }
  
    li {
      width: 49.5%;
      margin-bottom: 10px;
      position: relative;
  
      .product-card {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background: linear-gradient(135deg, #ffffff, #f8f8f8);
        transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
        opacity: 0;
        animation: fadeIn 0.5s forwards;
  
        &.hovered {
          transform: scale(1.05);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
          background: linear-gradient(135deg, #f8f8f8, #ffffff);
        }
  
        .product-image {
          width: 100%;
          border-radius: 10px 10px 0 0;
          display: block;
          transition: transform 0.3s ease;
        }
  
        .product-title {
          font-size: 14px;
          color: #333;
          text-align: center;
          padding: 10px;
          background-color: #f8f8f8;
          border-radius: 0 0 10px 10px;
          transition: color 0.3s ease;
        }
      }
    }
  
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  }
  
  .product-card:hover .product-image {
    transform: scale(1.1);
  }
  
  .product-card:hover .product-title {
    color: #ff6700;
  }
  </style>